@charset "utf-8";
$fontSize:100;
@function r($p){
    @return $p/$fontSize*1rem;
}
html{
    font-size: $fontSize*1px;
}
$fontSizebody:13px;
body{
    font-size: $fontSizebody;
} 
  
  

//中部公共部分
.middle{
    width: 100%;
    background: url(../img/srategybgd.jpg);
    background-size: 100%;
    text-align: center;
//  家高度
    //大图
    .m_pic>img{width:100%;
        margin: r(7) 0;}
    //GIMC导航栏
    .m_nav{
        width: 100%;
        display: flex;
        justify-content: space-around;
        border-bottom: 1px solid #dfdfdf;
        margin-bottom: r(20);
        background: #f5f5f5;
        >li{width: 33.33%;
            height: r(89);
            display: flex;
            align-items: center;
            justify-content: center;
            >a{color: #8b8b8b;
            font-size: $fontSizebody;}
        }
        >li:nth-child(3){>a{color: white}
            background: #b20000;}
    }
    //平台战略
    .strategy_word{
        margin-top: r(220);
        margin-bottom: r(100);
        >img{width: r(257);}
    }
    //主题1
    .strategy_title{
        width: r(501);
        height: r(51);
        background:#e3e3e3 ;
        border-radius: r(28);
        text-align: center;
        margin: 0 auto;
        text-align: center;
        letter-spacing: 2px;
        position: relative;
        >p{line-height: r(51);}
        >img{width: r(18);
            position: absolute;
            top: 0;
            bottom: 0;
            margin: auto;
            left: r(32);}        
    }
    .strategy_title2{
        margin-top:r(56) ;
        margin-bottom: r(298);}
    //下图标
    .strategy_downico{
        width: r(56);
        margin: 0 auto;
        >label>img{width: 100%;}
    }
    //下拉出现框
    .onpull{
        width: r(591);
        margin: 0 auto;
        text-align: center;
        background: white;
        //两个圆圈
        .circle{
            width:r(182);
            height: r(20);
            display: flex;
            margin: 0 auto;
            justify-content: space-between;
            >div{width: r(20);
                height: r(20);
                border-radius: 50%;
                background: gainsboro;}
            >div:hover{background: red;}
        }
        //触键
        .touch>label>img{width: r(25);}
        .touch{margin: r(60) 0 r(80);}
        //地图
        .mapbox{
            width: 100%;
            height: r(290);
            background: url(../img/ditu.png);
            background-size: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-wrap: wrap;
            padding: r(78) 0 r(100);
            box-sizing: border-box;
            margin: 0 0 r(46);
            >p{}
            >img{width: 100%;
                display: block;}
        }
        //树
        .tree>img{width:r(483) ;}
    }
    //点击弹出框
    .onclk{
        width: 100%;
        height: r(1380);
        background: rgba(0,0,0,.3);
        position: absolute;
        top: 0;
        .onclk_white{width:r(500) ;
            height: r(420);
            background: white;
            padding:r(90) r(108) r(45);
            box-sizing: border-box;
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            margin: auto;
                .twocircle>div{
                    width: r(100);
                    height: r(100);
                    border-radius: 50%;
                    background: #aa975c;
                    color: white;
                    margin: r(30) 0;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    }
                .twocircle{display: flex;
                    justify-content: space-between;}
                button{padding: r(8) r(50);
                    color: white;
                    background: #B20000;}   
        }
    }
    //事件
    #onpull_o{display: none;}
    #onpull_o:checked~.onpull{
        transform: translateY(r(1380));
        transition: transform 1s;}
        //下拉出现框~定位
        .onpull{position: absolute;
            left: 0;
            right: 0;
            margin: auto;
            top: r(-1000);}
        //点击弹出框~事件
        .onclk,#onclk_o{display: none;}
        #onclk_o:checked~.onclk{display: block;}
        #onclk_o:not(:checked)~.onclk{display: none;}
}
//动画
//下图标
.strategy_downico{
    overflow: hidden;
    img{animation:downmove .6s infinite;}
}
@keyframes downmove{
    0%{transform: translateY(r(-50));}
    25%{transform: translateY(r(-25));}
    50%{transform: translateY(r(0));}
    75%{transform: translateY(r(25));}
    100%{transform: translateY(r(50));}
}
//星星
//.touch{
//  height: r(25);
//  img{
//      animation: starscale 1s alternate-reverse infinite;}
//}
//@keyframes starscale{
//  0%{width: r(25);}
//  25%{width: r(50);}
//  50%{width: r(25);}
//  75%{width: r(50);}
//  100%{width: r(25);}
//}
